<template>
  <!-- 提示旗袍组件 -->
  <div ref="tooltip" class="wm-tooltip" @mouseover="tooltipInit">
    <!-- 提示文案 -->
    <div class="tooltip-box">
      <div
        ref="text"
        class="tooltip-text"
        :style="{
          top: tooltipY+'px',
          left: tooltipX+'px',
          color: colorStyle.color,
          background: colorStyle.background
        }"
      >
        <span>{{ name }}</span>
        <div ref="arrow" v-if="placement == 'bottom'" class="arrow arrow-top" :style="{ top: arrowY+'px', left: arrowX+'px' }"></div>
        <div ref="arrow" v-if="placement == 'left'" class="arrow arrow-right" :style="{ top: arrowY+'px', left: arrowX+'px' }"></div>
        <div ref="arrow" v-if="placement == 'top'" class="arrow arrow-bottom" :style="{ top: arrowY+'px', left: arrowX+'px' }"></div>
        <div ref="arrow" v-if="placement == 'right'" class="arrow arrow-left" :style="{ top: arrowY+'px', left: arrowX+'px' }"></div>
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "wm-tooltip",
  props: {
    // 显示文案
    name: {
      type: String
    },
    // 显示位置 top, right, bottom, left
    placement: {
      type: String,
      default: "top"
    },
    // 颜色风格
    colorStyle: {
      type: Object,
      default: () => {
        return {
          color: "#fff",
          background: "#444"
        };
      }
    }
  },
  data() {
    return {
      tooltipX: 0,
      tooltipY: 0,
      arrowX: 0,
      arrowY: 0
    };
  },
  mounted() {},
  methods: {
    // 初始化tooltip位置
    tooltipInit() {
      // 触发元素宽高
      let tooltipWidth = this.$refs.tooltip.offsetWidth;
      let tooltipHeight = this.$refs.tooltip.offsetHeight;
      // tooltip宽高
      let tooltipTextpWidth = this.$refs.text.offsetWidth;
      let tooltipTextHeight = this.$refs.text.offsetHeight;
      // tooltip位置
      let tooltipX = this.$refs.tooltip.getBoundingClientRect().x;
      let tooltipY = this.$refs.tooltip.getBoundingClientRect().y;
      // arrow 宽高,位置
      let arrowWidth = this.$refs.arrow.offsetWidth;
      let arrowHeight = this.$refs.arrow.offsetHeight;
      // 设置tooltip位置
      switch (this.placement) {
        case "top":
          this.tooltipX = tooltipX - tooltipTextpWidth / 2 + tooltipWidth / 2;
          this.tooltipY = tooltipY - (tooltipTextHeight + 8);
          this.arrowX = tooltipTextpWidth / 2 - arrowWidth / 2;
          this.arrowY = 0 + tooltipTextHeight;
          break;
        case "right":
          this.tooltipX = tooltipX + tooltipWidth + 8;
          this.tooltipY = tooltipY + tooltipHeight / 2 - tooltipTextHeight / 2;
          this.arrowX = 0 - arrowWidth;
          this.arrowY = tooltipHeight / 2 - arrowHeight / 2;
          break;
        case "bottom":
          this.tooltipX = tooltipX - tooltipTextpWidth / 2 + tooltipWidth / 2;
          this.tooltipY = tooltipY + tooltipTextHeight + 8;
          this.arrowX = tooltipTextpWidth / 2 - arrowWidth / 2;
          this.arrowY = 0 - arrowHeight;
          break;
        case "left":
          this.tooltipX = tooltipX - tooltipTextpWidth - 8;
          this.tooltipY = tooltipY + tooltipHeight / 2 - tooltipTextHeight / 2;
          this.arrowX = tooltipTextpWidth;
          this.arrowY = tooltipTextHeight / 2 - arrowHeight / 2;
          break;
        // 默认位置
        default:
          this.tooltipX = tooltipX - tooltipTextpWidth / 2 + tooltipWidth / 2;
          this.tooltipY = tooltipY - (tooltipTextHeight + 8);
          this.arrowX = tooltipTextpWidth / 2 - arrowWidth / 2;
          this.arrowY = 0 + tooltipTextHeight;
          break;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.wm-tooltip {
  .tooltip-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    .tooltip-text {
      padding: 6px 8px;
      border-radius: 4px;
      position: fixed;
      display: none;
      font-size: 12px;
    }
    .arrow {
      position: absolute;
      width: 0;
      height: 0;
    }
    .arrow-top {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #444;
    }
    .arrow-right {
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 5px solid #444;
    }
    .arrow-bottom {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid #444;
    }
    .arrow-left {
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-right: 5px solid #444;
    }
  }
}
.wm-tooltip:hover {
  .tooltip-text {
    display: block !important;
  }
}
</style>
